<template>
	<view @click="getScanCode" class="License">
		<view class="crossLicensePlus" v-if="!successTip">
		</view>
		<view class="crossLicenseText">
			<text>
				{{successTip?successTip:tipText}}
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tipText: String,
		},
		data() {
			return {
				successTip: null,
			};
		},
		methods: {
			getScanCode() {
				uni.scanCode({
					success: res => {
						this.$emit('getScanCodeInfo', res)
						this.successTip = '快递单号为:' +res.result
						uni.showToast({
							title:'扫码成功，请确认快递单号',
							duration:2000,
							icon:'success'
						})
					},
					fail: res => {
						this.successTip = null
						uni.showToast({
							title:'扫码失败，请重新扫码',
							duration:2000,
							icon:'none'
						})
					}
				});
			}
		},
	}
</script>

<style scoped>
	.License {
		height: 130upx;
		width: 230upx;
		background-color: #fdf5f3;
		position: relative;
		border-radius: 15upx;
		/* box-shadow: 0 0 20upx -10upx #b31f1f; */
		border:1px solid #eeeeee;
	}

	.crossLicensePlus {
		background-color: #ffc8c7;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 0;
		height: 0;
		position: absolute;
	}

	.crossLicensePlus:before,
	.crossLicensePlus:after {
		content: "";
		position: absolute;
		background: #ffc8c7;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.crossLicensePlus:before {
		width: 33.33upx;
		height: 7.33upx;
	}

	.crossLicensePlus:after {
		width: 7.33upx;
		height: 33.33upx;
	}

	.crossLicenseText {
		width: 100%;
		position: absolute;
		bottom: 0;
		text-align: center;
		font-size: 20upx;
		color: #6f6f6f;
		padding: 0;
	}

	.crossLicenseImg {
		height: 111.33upx;
		width: 230upx;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
</style>
